<template>
  <uni-popup ref="confirm" type="bottom" @change="onClose" mask-background-color="rgba(0, 0, 0, 0)" :isMaskClick="true">
	  <view style="height: 600rpx;background-color: #F0F0F0;" class="flex flex-column align-start justify-center flex-1 border-top">
		<swiper @change="onSwiperChange" :current="current" class="flex-1" style="width: 750rpx;height: 600rpx;">
			<swiper-item  >
				<!-- <text class="emojiicon">&#xC001;</text> -->
				<list style="height: 600rpx;">
					<cell v-for="(item,index) in transformListGrid(emojis,7)" :key="index">
						<view class="flex flex-row justify-center flex-1">
							<view class="flex flex-row justify-start flex-wrap px-1 ">
								<view @click="onEmoji(val)"  v-for="(val,index1) in item" :key="index1" class="mx-1 my-1">
									<text class="emojiicon" style="font-size: 70rpx;line-height: 75rpx;width: 80rpx;">{{val}}</text>
								</view>	
							</view>
						</view>
					</cell>
					<cell>
						<view style="height: 150rpx;"></view>
					</cell>
				</list>
			</swiper-item>
			<swiper-item style="width: 750rpx;">
				<list style="height: 600rpx;" :show-scrollbar="true" :scrollable="true">
					<cell v-for="(item,index) in favor_face_list" :key="index">
						<view class="flex flex-row justify-center px-1">
							<view class="flex flex-row justify-start flex-1">
								<block  v-for="(item1,index1) in item" :key="index1" >
									<view v-if="item1.event=='add'" class="rounded mt-2 mx-1" style="width: 160rpx;height: 160rpx;background-color: #F6F6F6;" @click="addAlbum()">
										<view class="position-absolute-full align-center justify-center">
											<view style="width: 50rpx;height: 50rpx;border-radius: 50rpx;background-color: rgba(0,0,0,0.5);" class="align-center justify-center">
												<em-icon style=" font-size: 32rpx;color: #FFFFFF;" :unicode="'\uea12'"></em-icon>
											</view>
										</view>
									</view>
									<view v-else @longpress="longFace($event,item1)"  @click="onFace(item1)" class="rounded mt-2 mx-1 align-center justify-center"style="width: 160rpx;height: 160rpx;background-color: #F6F6F6;" >
										<image   class="rounded" style="width: 120rpx;height: 120rpx;" mode="aspectFill" :src="config.imgUrl + item1.url"></image>
									</view>
								</block>
							</view>
						</view>
					</cell>
					<cell>
						<view style="height: 150rpx;"></view>
					</cell>
				</list>
			</swiper-item>
		</swiper>
		<view  class="flex flex-row align-center border-top px-3" style="width: 750rpx;height: 100rpx;">
			<view @click="swiperChange(0)">
				<!-- <em-icon class="list-item-left-icon-text" :style="{color:'#E64234':'#8C8C8C'}" :unicode="current==0?'\uec8c':'\uec8d'"></em-icon> -->
				<em-icon v-if="current==0" class="list-item-left-icon-text" :style="{color:'#E64234'}" :unicode="'\uec8c'"></em-icon>
				<em-icon v-else class="list-item-left-icon-text" style="{color:'#8C8C8C'}" :unicode="'\uec8d'"></em-icon>
			</view>
			<view @click="swiperChange(1)" class="pl-2">
				<em-icon v-if="current==1" class="list-item-left-icon-text" :style="{color:'#E64234'}" :unicode="'\uee0b'"></em-icon>
				<em-icon v-else class="list-item-left-icon-text" style="{color:'#8C8C8C'}" :unicode="'\uee0b'"></em-icon>
				<!-- <em-icon class="list-item-left-icon-text" :style="{color:current==1?'#E64234':'#8C8C8C'}" :unicode="current==1?'\uee0a':'\uee0b'"></em-icon> -->
			</view>
		</view>
	  </view>
	<!-- 长按菜单 -->
	<em-menus-popup :hasNav="false" :height="116" :width="(menusList.length * 90) + 30" :type="'fade'" ref="menuspopup" >
		<view class="flex flex-row align-center justify-center" style="background-color: #4C4C4C;border-radius: 10rpx;">
			<block v-for="(item,index) in menusList" :key="index">
				<view @click="item.event()" class="flex flex-column align-center justify-center my-2" style="width: 90rpx;">
					<em-icon style="font-size: 22px;color: #fff;" :unicode="item.iconUnicode"></em-icon>
					<text style="font-size: 12px;color: #fff;margin-top: 5rpx;">{{item.name}}</text>
				</view>
			</block>
		</view>	
	</em-menus-popup>
  </uni-popup>
</template>

<script>
	
import emojis from './emojis.js';
import emojis2 from './emojis2.js';
	import {
		mapState
	} from 'vuex'
  let app = {}
  // #ifdef MP-WEIXIN
  app = getApp({
    allowDefault: true
  }).$vm
  // #endif
  // #ifndef MP-WEIXIN
  app = getApp({
    allowDefault: true
  })
  // #endif
  let timer = null
  export default {
    name: 'em-header',
    props: {
    },
    data() {
      return {
        styles: {},
		confirm:null,
		menus:[],
		title:"",
		emojis:emojis,
		emojis2:emojis2,
		current:0,
		favor_face_list:[],
		menusList:[]
      }
    },
    watch: {
    },
	computed: {
	  ...mapState([
	    'systemInfo',
	  	'config',
		'userInfo'
	  ]),
	 
	},
	async created() {
		if(this.userInfo.id>0){
			this.getface()
		}
		await uni.sleep(2000)
		let emojisList = [];
		for (let i = 0; i <= 82; i++) {
		  emojisList.push(`/uc${this.transformnum(i)}`)
		}
		//console.log(emojisList)
		
	},
    methods: {
		transformListGrid(list = [],num = 4){
			var total = list.length
			var page = Math.ceil(total/num)
			var arr = [];
			for (var i = 0; i < page; i++) {
				var start = i*num
				arr[i] = []
				for (var j = 0; j < num; j++) {
					var no = start + j
					if ((no+1) > total) {
						continue;
					}
					 arr[i].push(list[no]) 
				}
			}
			return arr
		},
		transformnum(num){
			let len = 3 //显示的长度，如果以0001则长度为4
			num = parseInt(num, 10) + 1//转数据类型，以十进制自增
			num = num.toString()//转为字符串
			while (num.length < len) {//当字符串长度小于设定长度时，在前面加0
			  num = "0" + num
			}
			return num     
		},
		longFace(e,item){
				this.menusList = []
				this.menusList.push({
					name:"删除",
					iconUnicode:'\uec2a',
					event:()=>{
						uni.$http.post("/api/face/del",{
							id:item.id,
						})
						.then(res=>{
							this.getface()
						})
						this.$refs.menuspopup.close();
					}
				})
				
				this.menusList.push({
					name:"置顶",
					iconUnicode:'\uea74',
					event:()=>{
						uni.$http.post("/api/face/settop",{
							id:item.id,
						})
						.then(res=>{
							this.getface()
						})
						this.$refs.menuspopup.close();
					}
				})
				
				if(this.menusList.length == 0)return;
				uni.vibrateShortCustom();
				this.$refs.menuspopup.open(e);
				// #ifdef H5
				e.preventDefault();
				return false;
				// #endif
			
		},
		addAlbum(type){
			let _this = this
			uni.chooseImage({
				count: 1,  
				 crop:{  
				    width: 1024,  
				    height: 1024  
				 }, 
				sourceType: ['album'],
				success: function  (res) {
					res.tempFilePaths.map((val)=>{
						_this.upload(val,type)
					})
				}
			})
		},
		async upload(path,type="images"){
			const res = await uni.$http.upload("/api/user/upload",{},path)
			if(!res.data)return;
			uni.$http.post("/api/face/create",{
				url:res.data.url
			})
			.then(res=>{
				this.getface()
			})
			.catch(err=>{
				console.log("err",err)
			})
			
		},
		
	  async getface(){
		const res = await uni.$http.get("/api/Face/index",{
		})
		.catch(err=>{
			console.log("err",err)
		})
		console.log("res.rows",res.rows)
		if(!res.rows){
			return
		}
		//this.favor_face_list = res.rows;
		this.favor_face_list = this.transformListGrid([{
            "event": "add",
        },...res.rows])
		console.log(this.transformListGrid(res.rows))
	  },
	  async getfaceMore(){
	  		const res = await uni.$http.get("/api/face/index",{
	  		})
	  		.catch(err=>{
	  			console.log("err",err)
	  		})
	  		if(!res.rows){
	  			return
	  		}
	  		this.favor_face_list = this.transformListGrid(res.rows);
	  },
	  onSwiperChange(event){
		 this.current = event.detail.current
	  },
	  swiperChange(index){
	  	this.current = index
	  },
	  open({confirm,menus}){
		let _this = this
		this.menus = menus
		this.$refs.confirm.open()
		this.$refs.confirm.closeMask()
		this.confirm = confirm
		this.getface()
	  },
	  onClose(e){
		if(e.show){
			uni.$emit('ontools_height_change',{height:uni.upx2px(600)});
		}else{
			setTimeout(function() {
				uni.$emit('ontools_height_change',{height:uni.upx2px(0)}); 
			}, 100);
		}
		//console.log(e)
		 
	  },
	  onEmoji(e){
		this.confirm&&this.confirm({type:'emoji',unicode:e})   
	  },
	  onFace(e){
		 this.confirm&&this.confirm({type:'face',...e})   
	  },
	  onConfirm(e){
		//this.close()
		this.confirm&&this.confirm(e) 
	  },
	  close(){
		 this.$refs.confirm.close() 
	  },
    }
  }
</script>

<style>
@font-face {
	font-family: 'emojifont';
	src: url('http://emojifont.5gtc.net/emojifont/6efacba9-f558-4db0-8ed5-e51b14441a20/emojifont.ttf') format('truetype');
}
.camera-icon{
	padding: 60rpx;
	border-radius: 30rpx;
	font-size: 32px;
}
.border-bottom{
	border-bottom-width: 1px;
	border-style: solid;
	border-color: #EBEBEB;
}
.list-item-left-icon-text {
	font-size: 26px;
}
 .emojiicon {
    font-family: emojiicon !important;
    font-style: normal;
  }

</style>
